import React, {useRef, useState} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import {Button, message} from "antd";
import {PlusOutlined,EditOutlined,DeleteOutlined} from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import Edit from './components/Edit'
import {addRole, delRoleServe, getRole, updateRole} from '@/services/role'
import {getPermissionData} from "@/services/permission";



const Index = () => {
  const ref = useRef();

  // 添加 模态框状态
  const [isModalVisible,setisModalVisible] = useState(false);

  const [roleId,setRoleId] = useState('')

  const [treeData,settreeData] = useState([])

  const columns = [
    {
      title: '用户名',
      dataIndex: 'name',
      width: '30%',
    },
    {
      title: '昵称',
      dataIndex: 'cn_name',
      width: '40%',
    },
    {
      title: '操作',
      width: '30%',
      render: (_,record) => {
        return <div>
          <Button onClick={()=>{showModal(true,record.id)}} type="primary" shape="circle" icon={<EditOutlined />} />&nbsp;&nbsp;&nbsp;
          <Button type="primary" shape="circle" onClick={()=>{delRole(record.id)}} icon={<DeleteOutlined />} />
        </div>
      }
    }
  ]
  // 获取角色列表o
  const getRoleData = async () =>{
    const response = await getRole();
    return {
      data: response.data,
      success: true,
      total: response.meta.pagination.total,
    }
  }
  // 显示模态框
  const showModal = async (show,id = null) => {
    setRoleId(id)
    setisModalVisible(show)
    // 权限列表数据
    const response = await getPermissionData();
    const treeDatas = response.data.map(item => {
      return {
        key:item.id,
        value: item.id,
        title:item.cn_name,
        children: item.childes.data.map(item2 => {
          return {
            key:item2.id,
            value: item2.id,
            title:item2.cn_name,
          }
        })
      }
    })
    settreeData(treeDatas)
  }

  // 添加 关闭模态框
  const handleCancel = async () => {
    setisModalVisible(false)
  }


  // 添加 执行添加
  const handleAdd = async (value,state,uid) => {
    if (uid ==null){
      const resule  = await addRole(value)
      if (!resule.status) message.success('添加成功')
    }else {
      value.permission_id = value.permission_id ? value.permission_id : state
      const resule =  await updateRole(uid,value)
      if (!resule.status) message.success('添加成功')
    }
    setisModalVisible(false)
    ref.current.reload()
  }

  // 删除
  const delRole = async (uid) =>{
    const relute =   await  delRoleServe(uid)
    if (!relute.status){
      message.success('删除成功')
      ref.current.reload()
    }
  }
  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        request={ async (params= {},success,total) => getRoleData(params,success,total) }
        // dataSource={data}
        // childrenColumnName="name"
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        checkStrictly={false}
        search={false}
        pagination={false}
        ellipsis={true}
        dateFormatter="string"
        headerTitle="角色列表"
        toolBarRender={() => [
          <Button key="button" onClick={() => showModal(true)} icon={<PlusOutlined />} type="primary">
            新建
          </Button>,
        ]}
      />
      {
       isModalVisible ? <Edit
         isModalVisible={isModalVisible}
         handleCancel={handleCancel}
         handleAdd={handleAdd}
         treeData={treeData}
         roleId={roleId}
       /> :
       ''
      }
    </PageContainer>
  );
};

export default Index;
